<template>
  <div class="ECPM">
    <div class="top">
      <div class="top-left-search">
        <van-search background="#eee" style="border-radius: 10px" v-model="value" @search="handelsearch(value)" placeholder="请输入搜索关键词" />
      </div>
      <div class="top-right-num">共计:{{ num }}人</div>
    </div>
    <div class="middle">
      <div class="down-search">
        <!-- <van-dropdown-menu :active-color="color">
            <van-dropdown-item v-for="(item, index) in Option1" :key="index" v-model="formData1[item.value]" :options="item.option" />
          </van-dropdown-menu> -->
      </div>
      <div class="search-list">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <p class="subTitle"><span class="line"></span>人员信息</p>
          <div class="search-list-top" v-for="(item, index) in list" :key="index">
            <div class="top" v-for="(items, index) in tabs" :key="index">
              <div style="float: left">
                {{ items.name }}:<span style="font-weight: 500; padding-left: 20px">{{ item[items.pop] }}</span>
              </div>
              <div style="float: right">
                <van-icon v-if="items.isdelete" name="delete" @click="deleteData(item.id)" />
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-top">
              <van-button plain type="info" style="border-radius: 10px" @click="handleSelectGJ('GJ')"> <van-icon name="add" />从乡村建筑工匠库添加</van-button>
            </div>
            <div class="bottom-top-but">
              <van-button plain type="info" style="border-radius: 10px" @click="handleSelectGJ('')"> <van-icon name="add" />从诚信平台选择</van-button>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <div class="action">
      <van-popup v-model="showGJ" title="选择施工人员" round position="bottom" :safe-area-inset-bottom="true" :style="{ height: '70%' }">
        <div class="title">选择施工人员</div>
        <div class="top-search">
          <van-search v-model="value22" placeholder="请输入搜索关键词" @search="onSearch(value22)" />
        </div>
        <div style="height: 50vh; overflow: auto">
          <van-list v-model="loading1" :finished="finished1" :offset="2" finished-text="没有更多了" @load="onLoad1">
            <div>
              <div v-for="(item, index) in tableData" :key="index" :title="item.artisanName" :name="index">
                <van-field readonly :required="true" v-for="(it, index) in tableDataFiled" :key="index" v-model="item[it.key]" :label="it.label"  />
                <div style="padding-left: 80%; padding: 10px 10px 10px 83%">
                  <van-button plain type="info" @click="SelectData(item)"> 选择 </van-button>
                </div>
                <div style="width: 100%; height: 14px; background-color: #ccc"></div>
              </div>
            </div>
          </van-list>
        </div>
        <!-- <div style="position: fixed; bottom: 0">
            <van-button type="info" style="width: 100vw" >选择</van-button>
          </div> -->
      </van-popup>
    </div>
    <div class="action">
      <van-popup v-model="show" title="选择施工人员" round position="bottom" :safe-area-inset-bottom="true" :style="{ height: '70%' }">
        <div class="title">添加施工人员</div>
        <!-- <div v-for="(it, index) in tableDataFiled1" :key="index">
            <van-field v-if="it.label != '发证日期' && it.label != '有效期至'" :required="true" v-model="formDataGJ[it.key]" :label="it.label" :placeholder="'请填写' + it.label" />
            <select-picker v-else :ISrequired="true" :isTime="true" :labels="it.label" :selectValue="formDataGJ[it.key]" @getMessage="setValue"></select-picker>
          </div>
          <div style="position: fixed; bottom: 0" @click="handleAddData">
            <van-button type="info" style="width: 100vw">添加</van-button>
          </div> -->
          <div class="top-search">
          <van-search v-model="value11" placeholder="请输入搜索关键词" @search="onSearch1(value11)" />
        </div>
        <div style="height: 70vh; overflow: auto">
          <van-list v-model="loading1" :finished="finished1" :offset="2" finished-text="没有更多了" @load="onLoad2">
            <div>
              <div v-for="(item, index) in tableData1" :key="index" :title="item.artisanName" :name="index">
                <van-field  readonly :required="true" v-for="(it, index) in tableDataFiled2" :key="index" v-model="item[it.key]" :label="it.label" />
                <div style="padding-left: 80%; padding: 10px 10px 10px 83%">
                  <van-button plain type="info" @click="SelectData1(item)"> 选择 </van-button>
                </div>
                <div style="width: 100%; height: 14px; background-color: #ccc"></div>
              </div>
            </div>
          </van-list>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Artisans, houseRemoldUnitBuildPersonRel, houseRemoldUnitBuildPerson, houseRemoldUnitBuildPersonSave, companyData, housePublichouseRemoldUnitBuildPersonDelete } from '../../utils/api'
import selectPicker from '@/utils/selectPicker'
export default {
  data() {
    return {
      num: 0,
      activeNames: ['1'],
      showGJ: false,
      color: '#1989fa',
      value11:'',
      tableData1: [],
      value: '',
      loading1: false,
      finished1: false,
      pageNo: 1,
      show: false,
      pageNum: 0,
      pageSize: 20,
      value22:'',
      tableDataFiled: [
        {
          label: '人员姓名',
          key: 'artisanName'
        },
        {
          label: '证件号码',
          key: 'idCard'
        },
        {
          label: '联系电话',
          key: 'phone'
        },
        {
          label: '施工负责人浙里办手机号',
          key: 'phone'
        }
      ],
      tableDataFiled2: [
        {
          label: '人员姓名',
          key: 'personname'
        },
        {
          label: '证件号码',
          key: 'idcard'
        },
        {
          label: '注册类型及等级',
          key: 'certnum'
        },
        {
          label: '注册证书编号',
          key: 'certnum'
        },
        {
          label: '发证日期',
          key: 'tradetypeeffectdate'
        },
        {
          label: '有效期至',
          key: 'stampnum'
        }
      ],
      tableDataFiled1: [
        {
          label: '人员姓名',
          key: 'artisanName'
        },
        {
          label: '证件号码',
          key: 'idCard'
        },
        {
          label: '注册类型及等级',
          key: 'ZCLXDJ'
        },
        {
          label: '注册证书编号',
          key: 'ZCZSBH'
        },
        {
          label: '发证日期',
          key: 'FZRQ'
        },
        {
          label: '有效期至',
          key: 'YXQ'
        },
        {
          label: '施工负责人联系方式',
          key: 'phone'
        },
        {
          label: '施工负责人浙里办手机号',
          key: 'zlbPhone'
        }
      ],
      tableData: [],
      formDataGJ: {
        artisanName: '',
        idCard: '',
        ZCLXDJ: '',
        ZCZSBH: '',
        FZRQ: '',
        YXQ: '',
        phone: '',
        zlbPhone: ''
      },
      formData1: {
        value1: -1,
        value2: -1,
        value3: -1,
        value4: -1,
        value5: -1
      },
      list: [
      ],
      loading: false,
      finished: false,
      shenkaobeiData1:[],
      tabs: [
        {
          name: '人员姓名',
          pop: 'nickname',
          isdelete: true
        },
        {
          name: '证件号码',
          pop: 'idCard'
        },
        {
          name: '注册类型及等级',
          pop: ''
        },
        {
          name: '注册证书编号',
          pop: 'uscc'
        },
        {
          name: '发证日期',
          pop: 'createDate'
        },
        {
          name: '有效期至',
          pop: 'createDate'
        }
      ],
      Option1: [
        {
          option: [
            { text: '服务区域', value: -1 }
            // { text: '全部商品', value: 0 },
            // { text: '新款商品', value: 1 },
            // { text: '活动商品', value: 2 }
          ],
          value: 'value1'
        },
        {
          option: [
            { text: '工种类型', value: -1 }
            // { text: '全部商品', value: 0 },
            // { text: '新款商品', value: 1 },
            // { text: '活动商品', value: 2 }
          ],
          value: 'value2',
          title: '工种类型'
        },
        {
          option: [
            { text: '签约量', value: -1 }
            // { text: '全部商品', value: 3 },
            // { text: '新款商品', value: 4 },
            // { text: '活动商品', value: 5 }
          ],
          value: 'value3',
          title: '签约量'
        },
        {
          option: [
            { text: '星级', value: -1 }
            // { text: '22', value: 0 },
            // { text: '新款22商品', value: 1 },
            // { text: '22', value: 2 }
          ],
          value: 'value4',
          title: '星级'
        },
        {
          option: [
            { text: '点赞量', value: -1 }
            // { text: '111', value: 0 },
            // { text: '11', value: 1 },
            // { text: '11', value: 2 }
          ],
          value: 'value5',
          title: '点赞量'
        }
      ],
      rowData: {},
      shenkaobeiData:[]
    }
  },
  methods: {
    async onLoad() {
      this.pageNum += 1
      this.getData()
    },
    handelsearch(val){
      if (!val) return (this.list = this.shenkaobeiData)
      this.list = this.shenkaobeiData.filter((item) => {
        return item.nickname && item.nickname.indexOf(val) > -1
      })
    },
    onSearch1(val) {
      if (!val) return (this.tableData1 = this.shenkaobeiData1)
      this.tableData1 = this.shenkaobeiData1.filter((item) => {
        return item.personname && item.personname.indexOf(val) > -1
      })
    },
    //添加施工人员
    async handleAddData(data) {
      if (data) {
        data1.forEach((item) => {
          //如果当前需要添加的施工人员的身份证号在当前企业中 调用注册接口
          if (this.formDataGJ.idCard == item.idCard) {
            index += 1
            this.saveList(this.formDataGJ, 1)
          }
        })
      }
      if (index == 0) {
        this.$toast.fail('暂未查询到您的身份信息')
      }
    },
    async deleteData(data1) {
      let data = [data1 + '']
      const res = await housePublichouseRemoldUnitBuildPersonDelete(data)
      if (res.data.code == 200) {
        this.$toast.success('删除成功!')
        this.list = []
        this.getData()
      }
    },
    setValue(name, value) {
      console.log(name, value, 'dknfiue')
      if (value == '发证日期') {
        this.formDataGJ.FZRQ = name
      } else {
        this.formDataGJ.YXQ = name
      }
    },
    onLoad1() {
      this.handleSelectGJ('GJ')
      this.pageNo++
    },
    onLoad2() {
      this.handleSelectGJ('')
      this.pageNo++
    },

    //获取工匠列表
    async handleSelectGJ(data) {
      let me = this
      if (data == 'GJ') {
        this.showGJ = true
        // this.loading = true;
        let Base64 = require('js-base64').Base64
        const queryData = {
          accessCode: '7295a77b2730446c90684d4e0e33c255',
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          artisanName: '',
          bookNumber: '',
          cityCode: window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : '150000000000',
          pageNo: this.pageNo,
          pageSize: 100
        }
        const res = await Artisans(queryData)
        //打印res
        let newArr = []
        newArr = res.data.data.pageList
        newArr.forEach((item) => {
          try {
            item.artisanName = Base64.decode(item.artisanName)
            item.idCard = Base64.decode(item.idCard)
            item.phone = Base64.decode(item.phone)
          } catch (err) {
            console.log(err)
          }
        })
        this.loading1 = false
        this.tableData = this.tableData.concat(newArr)
        if (res.data.data.pageList.length == 0) {
          //数据全部加载完成
          this.finished1 = true
        } else {
          console.log(this.tableData, 'kjn')
          this.finished1 = false
        }
        // console.log(this.tableData, 'page');
      } else {
        this.show = true
        //window.localStorage.getItem('tyshxydm')   91330324MA2ARGA20M 测试
        let params = { accessCode: 'c9406731-50bc-4e23-b3f5-b7e7d3093875', appKey: '6738b790-69e8-11ec-a673-6805cab640a0', params: { tyshxydm: '91330324MA2ARGA20M', type: '3' } }
        const res = await companyData(params)
        //通过之后才能添加到公司当中
        let index = 0
        let data1 = JSON.parse(res.data.data.desc)
        console.log(data1)
        this.tableData1 = data1
        this.shenkaobeiData1 = data1
      }
    },
    //获取当前施工负责人列表
    async getData() {
      let data = {
        // "companyName": this.rowData.companyName, //企业名称 从上个环节传入
        // "createDate": "",
        // "createUser": "",
        projectPersonIdcard: window.localStorage.getItem('DanDianid'),
        // "idCard": window.localStorage.getItem("DanDianid"),
        // "nickname": this.rowData.nickname,//别名
        // "phone": window.localStorage.getItem("DanDianPhone"),
        // "sourceType": 0, //0代表是从工匠库添加的  1代表四库一平台添加
        uscc: this.rowData.uscc //统一社会信用代码
        // "userid": window.localStorage.getItem("ISZHUCE"),
        // "username": window.localStorage.getItem("DanDianName"),
        // "zlbPhone": window.localStorage.getItem("DanDianPhone")
      }
      const res = await houseRemoldUnitBuildPerson(this.pageNum, this.pageSize, data)
      this.num = res.data.data.totalCount
      // this.list.push(res.data.data.pageList)
      this.list = this.list.concat(res.data.data.pageList)
      this.shenkaobeiData = this.list
      if (res.data.data.pageList.length == 0 || res.data.data.pageList.length < 10) {
        //数据全部加载完成
        this.finished = true
      } else {
        this.finished = false
      }
    },
    //过滤工匠数据
    async onSearch(val) {
      let Base64 = require('js-base64').Base64
      let params = {
        accessCode: '7295a77b2730446c90684d4e0e33c255',
        artisanName: val,
        bookNumber: '',
        cityCode: window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : '150000000000',
        pageNo: 1,
        pageSize: 100000
      }
      const res = await Artisans(params)
      //打印res
      this.tableData = res.data.data.pageList
      this.tableData.forEach((item) => {
        try {
          item.artisanName = Base64.decode(item.artisanName)
          item.idCard = Base64.decode(item.idCard)
          item.phone = Base64.decode(item.phone)
        } catch (err) {
          console.log(err)
        }
      })
      console.log(this.tableData, 'page')
    },
    SelectData(data) {
      //当前选中的数据
      // console.log(this.tableData[this.activeNames], 'sfbneuifh')
      this.saveList(data, 0)
    },
    async SelectData1(data1, type = 1) {
      let data = {
        companyName: this.rowData.companyName,
        createDate: '',
        createUser: '',
        idCard: data1.idcard,
        nickname: data1.personname,
        phone: '',
        projectPersonIdcard: window.localStorage.getItem('DanDianid'),
        sourceType: 1,
        uscc: this.rowData.uscc,
        userid: '',
        username: data1.personname,
        zlbPhone: ''
      }
      const res = await houseRemoldUnitBuildPersonSave(data)
      if (res.data.code == 200) {
        this.$toast.success('保存成功')
        type == 0 ? (this.showGJ = false) : (this.show = false)
        this.list = []
        this.getData()
      } else {
        this.$toast.fail('请勿重复添加')
      }
    },
    async saveList(item, type) {
      let data = {
        companyName: this.rowData.companyName,
        createDate: '',
        createUser: '',
        idCard: item.idCard,
        nickname: item.artisanName,
        phone: item.phone,
        projectPersonIdcard: window.localStorage.getItem('DanDianid'),
        sourceType: type,
        uscc: this.rowData.uscc,
        userid: item.userid,
        username: item.phone,
        zlbPhone: item.phone
      }
      const res = await houseRemoldUnitBuildPersonSave(data)
      if (res.data.code == 200) {
        this.$toast.success('保存成功')
        type == 0 ? (this.showGJ = false) : (this.show = false)
        this.list = []
        this.getData()
      } else {
        this.$toast.fail('请勿重复添加')
      }
    }
  },
  watch: {},
  components: {
    selectPicker
  },
  created() {
    //获取路由参数
    this.rowData = JSON.parse(this.$route.query.data)
    //   iCityBridge.setTitle('企业施工人员维护');
  }
}
</script>

<style scoped lang="scss">
.ECPM {
  font-size: 14px;
  height: 100vh;
  background-color: #eee;
  .subTitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
    //   border-bottom: 1px solid #9b9b9b;
    padding-left: 10px;

    .line {
      width: 6px;
      height: 26px;
      background: #3f8ffc;
      display: inline-block;
      margin-right: 10px;
    }
  }
  .top {
    display: flex;
    justify-self: center;
    align-items: center;
    height: 30px;
    line-height: 30px;
    padding-top: 12px;

    .top-left-search {
      flex-grow: 2;
    }

    .top-right-num {
      flex-grow: 1;
    }
  }

  .middle {
    padding: 10px;

    .search-list {
      height: 90vh;
      overflow: auto;
      .search-list-top {
        background-color: #fff;
        border-radius: 8px;
        padding: 8px;
        // box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        margin-bottom: 8px;

        .top {
          display: flex;
          justify-content: space-between;
          line-height: 20px;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          line-height: 20px;
        }
      }
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    // padding: 6px;
  }

  .action {
    .title {
      font-size: 16px;
      text-align: center;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>

<style lang="scss">
.ECPM {
  .van-dropdown-menu__title {
    max-width: none !important;
  }

  .van-collapse-item__title--expanded {
    background-color: #e5f1ff;

    .van-cell__title {
      color: #3f8ffc;
    }

    .van-cell__right-icon {
      color: #3f8ffc;
    }
  }

  .van-collapse-item__content {
    padding: 0;
  }

  .van-field__label {
    width: 11em;
    color: #000;
    font-weight: bold;
  }

  .van-dropdown-menu__bar {
    background-color: #eee;
  }

  .selectValue {
    border-bottom: none !important;
  }

  .van-field__control {
    text-align: right;
  }
}
</style>
